<template>
  <div class="index">
    <div class="account-wrapper">
      <span @click="showAccountDialog=true">hello，账号名</span>
      <div class="account-admin" v-if="showAccountDialog" v-on:mouseleave="hideAccount">
        <span  @click="loginOut">退出登陆</span>
      </div>
    </div>
    <div class="error-msg-wrapper">
      <div class="header-wrapper">
        <div class="tips">
          <span>！！！有无数条异常信息</span>
        </div>
        <div class="fold">
          <el-button type="text" @click="showErrorList = !showErrorList">{{showErrorList?"隐藏":"展开"}}</el-button>
        </div>
      </div>
      <transition name="fade">
        <div class="error-table-wrapper" v-if="showErrorList">
          <div class="table-item-wrapper" v-for="(item,index) in 5" :key="index">
            <div class="flex-1">2018-04-28 14:25:35</div>
            <div class="flex-1">192.168.0.1</div>
            <div class="flex-1">登录进程</div>
            <div class="flex-1">登陆失败登陆失败登陆失败登陆失败登陆失败登陆失败登陆失败</div>
          </div>
        </div>
      </transition>
    </div>
    <div class="server-info-wrapper">
      <div class="header-wrapper">
        <div class="wrapper-item">
          <el-button type="primary" @click="openSelectServerDialog">选择要查询的服务器</el-button>
        </div>
        <div class="wrapper-item">
          <el-button type="primary" @click="addServerDialog=true">添加服务器</el-button>
          <el-button type="primary" icon="el-icon-refresh">刷新</el-button>
        </div>
      </div>
      <div class="server-table-wrapper" v-for="(serverInfoList,index) in serverList" :key="index">
        <div class="server-header-wrapper">
          <div class="title">{{serverInfoList.server_name}}</div>
          <div class="btn-wrapper">
            <el-button type="danger" size="small" @click="stopAllServer">停止所有服务</el-button>
            <el-button type="info" size="small">开启所有服务</el-button>
            <el-button type="warning" size="small" @click="restartAllServer">重启所有服务</el-button>
            <el-button type="primary" size="small" icon="el-icon-refresh">刷新</el-button>
          </div>
        </div>
        <div class="table-item-wrapper">
          <el-table :data="serverInfoList.process_list" style="width: 100%" border>
            <el-table-column prop="process" label="进程名称" align="center"></el-table-column>
            <el-table-column prop="remark" label="备注" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" align="center"></el-table-column>
            <el-table-column prop="run_time" label="运行时间" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" @click="openModifyServerRemarkDialog(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" :type='scope.row.status=="开启"?"danger":"success"' @click="toggleServerStatus(scope.$index,scope.row,serverInfoList.server_id)">
                  {{scope.row.status=="开启"?"关闭":"开启"}}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    
    <!-- 选择需要查询的服务器Dialog -->
    <el-dialog title="请选择要查询服务器" :visible.sync="selectServerDialog" width="500px" :close-on-click-modal="false" :before-close="closeSelectServerDialog">
      <el-form label-position="left">
          <el-checkbox-group v-model="selectedServerList">
            <el-checkbox :label="serverItem.server_id" v-for="(serverItem,index) in queryServerList" :key="index">{{serverItem.server_name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeSelectServerDialog">取 消</el-button>
        <el-button type="primary" @click="confirmSelectServer">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 选择需要查询的服务器Dialog END -->

    <!-- 添加服务器Dialog -->
    <el-dialog title="添加服务器" :visible.sync="addServerDialog" width="500px">
      <el-form :model="serverForm" label-position="left">
        <el-form-item label="服务器名称" label-width="100px">
          <el-input v-model="serverForm.serverName"></el-input>
        </el-form-item>
        <el-form-item label="IP地址" label-width="100px">
          <el-input v-model="serverForm.serverIP"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="100px">
          <el-input v-model="serverForm.serverPass"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addServerDialog = false">取 消</el-button>
        <el-button type="primary" @click="addServerDialog = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加服务器Dialog END -->

    <!-- 修改备注Dialog -->
    <el-dialog title="修改备注" :visible.sync="modifyServerRemarkDialog" width="500px">
      <el-form label-position="left">
        <el-form-item label="新备注" label-width="100px">
          <el-input v-model="newServerRemark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyServerRemarkDialog = false">取 消</el-button>
        <el-button type="primary" @click="modifyServerRemarkDialog = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改备注Dialog END -->
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      showErrorList: false,
      addServerDialog: false,
      selectServerDialog: false,
      serverForm: {
        serverName: "",
        serverIP: "",
        serverPass: ""
      },
      serverList: [
        {
          server_id: 1,
          server_name: "服务器001",
          process_list: [
            {
              process_id: 1,
              process: "登陆进程001",
              remark: "我只是一个备注",
              status: "开启",
              run_time: "20天"
            },
            {
              process_id: 2,
              process: "登陆进程002",
              remark: "我只是一个备注",
              status: "开启",
              run_time: "20天"
            },
            {
              process_id: 3,
              process: "登陆进程003",
              remark: "我只是一个备注",
              status: "开启",
              run_time: "20天"
            }
          ]
        },
        {
          server_id: 2,
          server_name: "服务器002",
          process_list: [
            {
              process_id: 3,
              process: "支付进程001",
              remark: "我只是一个备注",
              status: "开启",
              run_time: "122天"
            },
            {
              process_id: 4,
              process: "支付进程002",
              remark: "我只是一个备注",
              status: "开启",
              run_time: "7天"
            },
            {
              process_id: 5,
              process: "支付进程003",
              remark: "我只是一个备注",
              status: "开启",
              run_time: "11天"
            },
            {
              process_id: 6,
              process: "支付进程004",
              remark: "我只是一个备注",
              status: "开启",
              run_time: "66天"
            }
          ]
        }
      ],
      modifyServerRemarkDialog: false,
      newServerRemark: "",
      showServerBtn: true,
      showAccountDialog: false,
      selectedServerList: [],
      queryServerList: []
    };
  },
  methods: {
    // 隐藏退出登陆div
    hideAccount() {
      this.showAccountDialog = false;
    },
    // 推出登陆
    loginOut() {
      this.$router.push({ name: "Login" });
    },
    // 打开修改备注dialog
    openModifyServerRemarkDialog() {
      this.modifyServerRemarkDialog = true;
    },
    // 停止所有服务
    stopAllServer() {
      this.$confirm("确定要停止所有服务吗？");
    },
    // 重启所有服务
    restartAllServer() {
      this.$confirm("确定要重启所有服务吗？");
    },
    // 点击智能切换开启和关闭按钮
    toggleServerStatus(process_id, process_info, server_id) {
      this.serverList.map(v => {
        if (v.server_id == server_id) {
          v.process_list.map(vm => {
            if (vm.process_id == process_info.process_id) {
              if (vm.status == "开启") {
                vm.status = "关闭";
              } else if (vm.status == "关闭") {
                vm.status = "开启";
              }
            }
          });
        }
      });
      this.showServerBtn = false;
    },
    // 打开选择服务器dialog
    openSelectServerDialog() {
      this.selectServerDialog = true;
      this.serverList.map(v => {
        this.queryServerList.push({
          server_id: v.server_id,
          server_name: v.server_name
        });
      });
    },
    // 关闭选择服务器dialog
    closeSelectServerDialog() {
      this.selectServerDialog = false;
      this.queryServerList = [];
    },
    // 确定选择服务器dialog
    confirmSelectServer() {
      this.selectServerDialog = false;
      this.queryServerList = [];
    }
  }
};
</script>

<style lang='scss'>
.index {
  width: 800px;
  padding: 20px;
  overflow: hidden;
  margin: 0 auto;
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
  .account-wrapper {
    height: 40px;
    line-height: 40px;
    text-align: right;
    color: #78627e;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    .account-admin {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: #fff;
      position: absolute;
      right: 0;
      top: 40px;
      color: #409eff;
    }
    .account-admin:hover {
      color: #66b1ff;
    }
  }
  .error-msg-wrapper {
    .header-wrapper {
      display: flex;
      height: 40px;
      line-height: 40px;
      border: 1px solid #ebebeb;
      .tips {
        flex: 1;
        padding: 0 20px;
        color: #f56c6c;
      }
      .fold {
        width: 100px;
        text-align: center;
      }
    }
    .error-table-wrapper {
      .table-item-wrapper {
        text-align: center;
        color: #78627e;
        border-left: 1px solid #ebebeb;
        border-right: 1px solid #ebebeb;
        border-bottom: 1px solid #ebebeb;
        display: flex;
        align-items: center;
      }
      .flex-1 {
        flex: 1;
        padding: 10px;
      }
    }
  }
  .server-info-wrapper {
    margin: 20px 0;
    .header-wrapper {
      display: flex;
      justify-content: space-between;
      .wrapper-item {
        .input-wrapper {
          width: 300px;
        }
      }
    }
    .server-table-wrapper {
      margin: 20px 0;
      .server-header-wrapper {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #ebebeb;
        border-left: 1px solid #ebebeb;
        border-right: 1px solid #ebebeb;
        align-items: center;
        .title {
          font-size: 18px;
          color: #333333;
          padding: 10px;
        }
        .btn-wrapper {
          padding: 10px;
        }
      }
    }
  }
}
</style>
